<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="./bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
    <link href="./bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
		<script type="text/javascript">
			function check() {
				var patten=new RegExp(/^[0-9]+$/);
				if (!patten.test(document.getElementById("maxPointsId").value) || document.getElementById("maxPointsId").value > 1000000 || document.getElementById("maxPointsId").value < 1) {
					alert("请输入1~1000000之间的整数！");
					document.getElementById("maxPointsId").focus();
					return false;
				}
				document.getElementById("form1").submit();
				return true;
			}
		</script>
</head>

<body>
<div class="container">
    <form id="form1" action="../DoQueryServlet" method="post" class="form-horizontal"  role="form">
        <fieldset>
            <legend>Test</legend>
			<div class="panel panel-success">
			<div class="panel-heading">设置查询范围</div>
            <c:if test="${queryReport.userInputCompnents.startDate != null }">
	            <div class="form-group">
	                <label for="dtp_input1" class="col-md-2 control-label" style="width:120px;">${queryReport.userInputCompnents.startDate.caption}：</label>
	                <c:if test="${queryReport.userInputCompnents.startDate.type=='date_time'}">
		                <div class="input-group date form_datetime col-md-5" data-date="" data-date-format="yyyy-mm-dd hh:ii:ss" data-link-field="dtp_input1" style="width:280px;">
		                    <input class="form-control" name="${queryReport.userInputCompnents.startDate.name}" size="16" type="text" value="${queryReport.userInputCompnents.startDate.listValue}" readonly>
		                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
							<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
		                </div>
						<input type="hidden" id="dtp_input1" value="" /><br/>
					</c:if>
					<c:if test="${queryReport.userInputCompnents.startDate.type=='day'}">
						<div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="width:280px;">
		                    <input class="form-control" name="${queryReport.userInputCompnents.startDate.name}" size="16" type="text" value="${queryReport.userInputCompnents.startDate.listValue}" readonly>
		                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
							<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
		                </div>
						<input type="hidden" id="dtp_input2" value="" /><br/>
					</c:if>
	            </div>
            </c:if>
            <c:if test="${queryReport.userInputCompnents.endDate != null }">
	            <div class="form-group">
	                <label for="dtp_input1" class="col-md-2 control-label" style="width:120px;">${queryReport.userInputCompnents.endDate.caption}：</label>
	                <c:if test="${queryReport.userInputCompnents.endDate.type == 'date_time' }">
		                <div class="input-group date form_datetime col-md-5" data-date="" data-date-format="yyyy-mm-dd hh:ii:ss" data-link-field="dtp_input1" style="width:280px;">
		                    <input class="form-control" name="${queryReport.userInputCompnents.endDate.name}" size="16" type="text" value="${queryReport.userInputCompnents.endDate.listValue}" readonly>
		                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
							<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
		                </div>
						<input type="hidden" id="dtp_input1" value="" /><br/>
					</c:if>
					<c:if test="${queryReport.userInputCompnents.endDate.type == 'day' }">
						<div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="width:280px;">
		                    <input class="form-control" name="${queryReport.userInputCompnents.endDate.name}" size="16" type="text" value="${queryReport.userInputCompnents.endDate.listValue}" readonly>
		                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
							<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
		                </div>
						<input type="hidden" id="dtp_input2" value="" /><br/>
					</c:if>
	            </div>
            </c:if>
            <c:if test="${queryReport.userInputCompnents.depRelated != null }">
				<div class="form-group">
					<label for="dtp_input2" class="col-md-2 control-label" style="width:120px;">${queryReport.userInputCompnents.depRelated.caption}：</label>
					<div class="btn-group" style="padding-left:15px;padding-right:15px;">
					<div class="row download-builder" style="padding-left:15px;padding-right:15px;">
					  	<div class="span3" style="width:150px;">
						  	<c:forEach items="${queryReport.userInputCompnents.depRelated.listValues}" var="Value" varStatus="status">
								<c:if  test="${status.index != 0 && ((fn:length(queryReport.userInputCompnents.depRelated.listValues)%3 == 0 && status.index%((fn:length(queryReport.userInputCompnents.depRelated.listValues)/3)) == 0) || (fn:length(queryReport.userInputCompnents.depRelated.listValues)%3 != 0 && status.index%(((fn:length(queryReport.userInputCompnents.depRelated.listValues) - fn:length(queryReport.userInputCompnents.depRelated.listValues)%3)/3)+1) == 0))}">
									</div>
									<div class="span3"  style="width:150px;">
								</c:if>
								<c:if test="${Value.selected == true}">
								<label class="checkbox"><input name="${queryReport.userInputCompnents.depRelated.name }" checked="checked" type="checkbox" value="${Value.value }">${Value.caption }</label>
								</c:if>
								<c:if test="${Value.selected == false}">
								<label class="checkbox"><input name="${queryReport.userInputCompnents.depRelated.name }" type="checkbox" value="${Value.value }">${Value.caption }</label>
								</c:if>
							</c:forEach>
					  	</div>
					 </div>
					 </div>
				</div>
			</c:if>
			<c:if test="${queryReport.userInputCompnents.districts != null }">
			<div class="form-group">
				<label for="dtp_input2" class="col-md-2 control-label" style="width:120px;">${queryReport.userInputCompnents.districts.caption}：</label>
				<div class="btn-group" style="padding-left:15px;padding-right:15px;">       
				<div class="row download-builder" style="padding-left:15px;padding-right:15px;">
				  <div class="span3" style="width:150px;">
				  	<c:forEach items="${queryReport.userInputCompnents.districts.listValues}" var="Value" varStatus="status">
						<c:if  test="${status.index != 0 && ((fn:length(queryReport.userInputCompnents.districts.listValues)%3 == 0 && status.index%((fn:length(queryReport.userInputCompnents.districts.listValues)/3)) == 0) || (fn:length(queryReport.userInputCompnents.districts.listValues)%3 != 0 && status.index%(((fn:length(queryReport.userInputCompnents.districts.listValues) - fn:length(queryReport.userInputCompnents.districts.listValues)%3)/3)+1) == 0))}">
							</div>
							<div class="span3"  style="width:150px;">
						</c:if>
						<c:if test="${Value.selected == true}">
						<label class="checkbox"><input name="${queryReport.userInputCompnents.districts.name }" checked="checked" type="checkbox" value="${Value.value }">${Value.caption }</label>
						</c:if>
						<c:if test="${Value.selected == false}">
						<label class="checkbox"><input name="${queryReport.userInputCompnents.districts.name }" type="checkbox" value="${Value.value }">${Value.caption }</label>
						</c:if>
					</c:forEach>
				  </div><!-- /span -->
				 </div>
				 </div>
			</div>
			</c:if>
			
			<c:if test="${queryReport.userInputCompnents.mapItem != null }">
			<div class="panel panel-info">
				<div class="panel-heading">
					${queryReport.userInputCompnents.mapItem.caption}
				</div>
				<div class="form-group">
					<label for="dtp_input2" class="col-md-2 control-label"
						style="width: 120px;">
						缩放级别：
					</label>
					<div class="btn-group"
						style="padding-left: 15px; padding-right: 15px;">
						<div class="row download-builder"
							style="padding-left: 15px; padding-right: 15px;">
							<div style="padding-left: 15px;width: 90px;">
								<select name="scale" class="form-control">
									<option>12</option>
									<option>13</option>
									<option>14</option>
									<option>15</option>
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label for="dtp_input2" class="col-md-2 control-label"
						style="width: 120px;">
						显示单位：
					</label>
					<div class="btn-group"
						style="padding-left: 15px; padding-right: 15px;">
						<div class="row download-builder"
							style="padding-left: 15px; padding-right: 15px;">
							<div style="padding-left: 15px;width: 90px;">
								<select name="pointSize" class="form-control">
									<option>1</option>
									<option>2</option>
									<option>3</option>
									<option>4</option>
									<option>5</option>
									<option>6</option>
									<option>7</option>
									<option>8</option>
									<option>9</option>
									<option>10</option>
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label for="dtp_input2" class="col-md-2 control-label"
						style="width: 120px;">
						最多点数：
					</label>
					<div class="btn-group"
						style="padding-left: 15px; padding-right: 15px;">
						<div class="row download-builder"
							style="padding-left: 15px; padding-right: 15px;">
							<div style="padding-left: 15px;width: 140px;">
								<input id="maxPointsId" name="maxPoints" class="form-control" type="text" value="1000" placeholder="1-1000000之间">
							</div>
						</div>
					</div>
				</div>
			</div>
			<p><a class="btn btn-primary btn-lg" role="button" onClick="check();">提交</a></p>
			</c:if>
			<c:if test="${queryReport.userInputCompnents.mapItem == null }">
			<p><a class="btn btn-primary btn-lg" role="button" onClick="javascript:submit();">提交</a></p>
			</c:if>
        </fieldset>
    </form>
</div>

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript">
    $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1
    });
	$('.form_date').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
    });
</script>

</body>
</html>
